<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
import { useLanguageStore } from '@/stores/pinia/Language'
import type { TableColumns } from '@/types/antd'

defineOptions({
	name: 'TableLanguageTest'
})

const { t } = useI18n()
const languageStore = useLanguageStore()
const { currentLanguage } = storeToRefs(languageStore)

// 方案1：使用响应式对象
const columns = ref<TableColumns>([
	{
		title: t('手机号'),
		dataIndex: 'mobile',
		align: 'center' as const,
		key: 'mobile'
	},
	{
		title: t('账户名'),
		dataIndex: 'account_name',
		align: 'center' as const,
		key: 'account_name'
	},
	{
		title: t('状态'),
		dataIndex: '_status',
		align: 'center' as const,
		key: '_status'
	},
	{
		title: t('创建时间'),
		dataIndex: '_created_at',
		align: 'center' as const,
		key: '_created_at'
	}
])

// 方案2：使用watch监听语言变化
watch(currentLanguage, () => {
	columns.value = [
		{
			title: t('手机号'),
			dataIndex: 'mobile',
			align: 'center' as const,
			key: 'mobile'
		},
		{
			title: t('账户名'),
			dataIndex: 'account_name',
			align: 'center' as const,
			key: 'account_name'
		},
		{
			title: t('状态'),
			dataIndex: '_status',
			align: 'center' as const,
			key: '_status'
		},
		{
			title: t('创建时间'),
			dataIndex: '_created_at',
			align: 'center' as const,
			key: '_created_at'
		}
	]
})

// 方案3：使用函数返回动态columns
const getColumns = (): TableColumns => [
	{
		title: t('手机号'),
		dataIndex: 'mobile',
		align: 'center' as const,
		key: 'mobile'
	},
	{
		title: t('账户名'),
		dataIndex: 'account_name',
		align: 'center' as const,
		key: 'account_name'
	},
	{
		title: t('状态'),
		dataIndex: '_status',
		align: 'center' as const,
		key: '_status'
	},
	{
		title: t('创建时间'),
		dataIndex: '_created_at',
		align: 'center' as const,
		key: '_created_at'
	}
]

// 方案4：使用computed（虽然您要求不用，但作为对比）
// const columns = computed(() => getColumns())

const dataSource = ref([])
const pagination = ref({
	current: 1,
	pageSize: 10,
	total: 0
})
</script>

<template>
	<IsGuest>
		<div class="p-4">
			<h1 class="text-2xl font-bold mb-4">{{ t('表格语言切换测试') }}</h1>

			<div class="mb-6">
				<LanguageSwitch />
			</div>

			<div class="mb-4">
				<h2 class="text-lg font-semibold mb-2">方案1 & 2：使用响应式对象 + watch</h2>
				<a-table
					:columns="columns"
					:bordered="true"
					:data-source="dataSource"
					:pagination="pagination" />
			</div>

			<div class="mb-4">
				<h2 class="text-lg font-semibold mb-2">方案3：使用函数动态返回</h2>
				<a-table
					:columns="getColumns()"
					:bordered="true"
					:data-source="dataSource"
					:pagination="pagination" />
			</div>
		</div>
	</IsGuest>
</template>
